<template>
  <div class="store-container">
    <!-- 顶部导航栏 -->
    <nav class="nav-bar">
      <div class="nav-container">
        <!-- 左侧 Logo -->
        <div class="nav-left">
          <a href="/" class="site-logo">
            <span>EC</span>
          </a>
        </div>

        <!-- 中间导航菜单 -->
        <div class="nav-menu">
          <a href="#" class="nav-link">Mac</a>
          <a href="#" class="nav-link">iPad</a>
          <a href="#" class="nav-link">iPhone</a>
          <a href="#" class="nav-link">Watch</a>
          <a href="#" class="nav-link">支持</a>
        </div>

        <!-- 右侧登录按钮 -->
        <div class="nav-right">
          <a href="#" class="login-btn">登录</a>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 顶部横幅 -->
      <div class="banner">
        <h1>EC 企业之选商城</h1>
        <p>选购各类 Apple 产品，享受专业支持服务。</p>
      </div>
      <!-- 特色产品展示 -->
      <div class="featured-products">
        <div class="product-large">
          <img src="/img/iphone16.jpg" alt="iPhone 16" />
          <div class="product-info">
            <h2>iPhone 16</h2>
            <p>钛金属。超强大。超 Pro。</p>
            <div class="product-actions">
              <button class="btn-primary">购买</button>
              <a href="#" class="btn-link">了解更多 ></a>
            </div>
          </div>
        </div>
        <div class="product-grid">
          <div class="product-card">
            <div class="product-image">
              <img src="/img/iphone16.jpg" alt="iPad Pro" />
              <div class="product-content">
                <h3>iPad Pro</h3>
                <p>超凡的 M2 芯片，现已上市</p>
                <p class="price">¥6699 起</p>
              </div>
            </div>
          </div>
          <div class="product-card">
            <div class="product-image">
              <img src="/img/iphone16.jpg" alt="MacBook Pro" />
              <div class="product-content">
                <h3>MacBook Pro</h3>
                <p>新款 M3 芯片，性能更强劲</p>
                <p class="price">¥12999 起</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 服务支持区域 -->
      <div class="services">
        <h2>获取帮助</h2>
        <div class="service-grid">
          <div class="service-card">
            <h3>产品课堂</h3>
            <p>参加免费专人辅导</p>
            <a href="#" class="learn-more">了解更多 ></a>
          </div>
          <div class="service-card">
            <h3>现场服务</h3>
            <p>现场维修保养服务</p>
            <a href="#" class="learn-more">了解更多 ></a>
          </div>
          <div class="service-card">
            <h3>要客分享</h3>
            <p>现场体验产品服务</p>
            <a href="#" class="learn-more">了解更多 ></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.store-container {
  min-height: 100vh;
  background: #f5f5f7;
}

.nav-bar {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  height: 44px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

.nav-container {
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.nav-left {
  flex: 1;
}

.site-logo {
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
  color: #1d1d1f;
}

.nav-menu {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35px;
}

.nav-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.login-btn {
  text-decoration: none;
  color: #1d1d1f;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 20px;
  transition: background-color 0.3s ease;
}

.login-btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.nav-link {
  color: #1d1d1f;
  text-decoration: none;
  font-size: 14px;
  padding: 0 10px;
}

.search-box input {
  background: #f5f5f7;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  width: 200px;
}

.main-content {
  max-width: 1440px;
  margin: 0 auto;
  padding: 84px 40px 40px;
}

.banner {
  text-align: center;
  margin-bottom: 60px;
}

.banner h1 {
  font-size: 48px;
  margin-bottom: 16px;
}

.quick-nav {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 60px;
}

.nav-item {
  text-align: center;
}

.nav-item img {
  width: 54px;
  height: 54px;
  margin-bottom: 8px;
}

.featured-products {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  margin-bottom: 60px;
}

.product-large {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  height: 600px;
}

.product-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  width: 100%;
  padding: 0 40px;
  z-index: 2;
}

.product-info h2 {
  font-size: 40px;
  margin-bottom: 10px;
}

.product-info p {
  font-size: 20px;
  margin-bottom: 20px;
}

.product-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.btn-primary {
  background: #0071e3;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 980px;
  font-size: 17px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background: #0077ed;
}

.btn-link {
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  padding: 12px 24px;
  transition: opacity 0.3s ease;
}

.btn-link:hover {
  opacity: 0.8;
}

.product-grid {
  display: grid;
  gap: 30px;
}

.product-card {
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}

.product-image {
  width: 100%;
  height: 280px;
  position: relative;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  width: 100%;
  padding: 0 20px;
  z-index: 2;
}

.product-content h3 {
  font-size: 24px;
  margin: 0 0 10px;
  color: #fff;
}

.product-content p {
  font-size: 14px;
  color: #f5f5f7;
  margin: 0 0 8px;
  opacity: 0.8;
}

.price {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}

.services {
  margin-top: 80px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.service-card {
  background: #fff;
  border-radius: 18px;
  padding: 30px;
}

/* 添加悬停效果 */
.product-card:hover .product-image img {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

@media (max-width: 1200px) {
  .featured-products {
    grid-template-columns: 1fr;
  }
}
</style>
